<template>
  <div style="padding: 20px">
    <div class="headerBoxList">
    <svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.45455 30.9942C6.14242 28.461 4 24.4278 4 19.8851C4 12.2166 10.1052 6 17.6364 6C23.9334 6 29.2336 10.3462 30.8015 16.2533C32.0353 15.6159 33.431 15.2567 34.9091 15.2567C39.9299 15.2567 44 19.4011 44 24.5135C44 28.3094 41.7562 31.5716 38.5455 33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/><path d="M26 42C29.3137 42 32 39.3137 32 36C32 32.6863 29.3137 30 26 30C22.6863 30 20 32.6863 20 36C20 39.3137 22.6863 42 26 42Z" fill="none" stroke="#333" stroke-width="4" stroke-linejoin="round"/><path d="M22.2426 15.7574C21.1569 14.6716 19.6569 14 18 14C14.6863 14 12 16.6863 12 20C12 21.6569 12.6716 23.1569 13.7574 24.2426" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/></svg>
      <span style="margin-left: 10px"
        >天气信息
      </span>
      <el-button
        type="primary"
        size="mini"
        style="margin-left:auto"
        @click="handlePrint"
      >
        打印
      </el-button>
    </div>
    <div class="content">
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="content"
        label="内容"
        >
        <template slot-scope="scope">
            <div>播报 ：{{scope.row.one_sentence_tip}}</div>
            <div>CO：{{scope.row.co}}</div>
            <div>O3：{{scope.row.o3}}</div>
            <div>湿度 ：{{scope.row.humidity}}</div>
            <!-- <div>参考时间 ：{{scope.row.observation_time}}</div> -->
            <div>空气质量 ：{{scope.row.p_num}}</div>
            <div>pm2.5 ：{{scope.row.pm2_5}}</div>
            <div>体表温度 ：{{scope.row.realfeel}}</div>
            <div>SO2 ：{{scope.row.so2}}</div>
            <div>温度 ：{{scope.row.temperature}}</div>
            <div>时区 ：{{scope.row.time_zone}}</div>
            <div>更新时间 ：{{formateDate(scope.row.update_time)}}</div>
        </template>
      </el-table-column>
    </el-table>
      <div class="block">
    <el-pagination
      :small='true'
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="offset"
      :page-sizes="[20, 50, 100, 200]"
      :page-size="limit"
      layout="total, prev, pager, next"
      :total="total">
    </el-pagination>
  </div>
    </div>
  </div>
</template>
  
  <script>
  import { getHuaWeiWeatherInfoApi } from "@/api/phoneInfo/index"
  import { parseTime } from '@/utils/index'
export default {
  props:['sendData'],
  name: "weatherInfo",
  data() {
    return {
      list: [],
      offset:1,
      limit:1000,
      total: 0,
    };
  },
  mounted() {
    this.init();
  },
  watch: {
    "$store.state.account.huawei": function () {
      this.tableData = [];
    this.init()
    },
  },
  methods: {
       formateDate(date){
        return  parseTime(date)
    },
    handlePrint() {
  if (!this.list.length) {
    this.$message.warning("暂无数据可打印")
    return
  }

  const properties = [
    { field: "one_sentence_tip", displayName: "播报" },
    { field: "co", displayName: "CO" },
    { field: "o3", displayName: "O3" },
    { field: "humidity", displayName: "湿度" },
    { field: "p_num", displayName: "空气质量" },
    { field: "pm2_5", displayName: "pm2.5" },
    { field: "realfeel", displayName: "体表温度" },
    { field: "so2", displayName: "SO2" },
    { field: "temperature", displayName: "温度" },
    { field: "time_zone", displayName: "时区" },
    {
      field: "update_time",
      displayName: "更新时间",
      // 格式化
      formatter: (value) => this.formateDate(value),
    },
  ]

  printJS({
    printable: this.list,
    properties,
    type: "json",
    header: "天气信息",
    style: `
      table {
        border-collapse: collapse;
        width: 100%;
        font-size: 14px;
      }
      table td, table th {
        border: 1px solid #ccc;
        padding: 8px;
        word-break: break-all;
      }
      table th {
        background: #f6f6f6;
        font-weight: 600;
      }
      table tr:nth-child(even){
        background:#fafafa;
      }
    `,
  })
},

     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.limit = val;
        this.init()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.offset = val;
        this.init()
      },
    init() {
        let data = {
            proof_num : this.sendData.proof_num,
            weatherType:'weatherInfo',
            offset:this.offset,
            limit:this.limit
        }
        getHuaWeiWeatherInfoApi(data).then(res=>{
            this.list = res.data;
            if(res.data.length ==0)this.total = 0
            this.total = res.data[0].cnt
        }).catch(error=>{

        })
    },
  },
};
</script>
  
  <style scoped>
.headerBoxList {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d2d2d2;
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}
.content {
  height: 80vh;
  overflow-y: auto;
  /* padding-left: 50px; */
  margin-top: 20px;
}
@media screen and (min-width: 2360px) {
  .content {
    height: 67vh;
    overflow-y: auto;
  }
}
</style>